<template>
    <div class="cardlist zxzbg1">

        <div class='blanklogobg'>
            <img :src='cccard.issuingBank | fmtBankimsrc'>
        </div>
        {{cccard.issuingBank |
        fmtBankCode}}({{cccard.cardNumber | fmtCardNo
        }})

        <span class="dzx">执行中</span>
        <div style="clear:both"></div>
        <!-- <div :class="{ showtext:isshowtext}" v-if="isshowtext">
            <marquee  style="margin:0px auto;width:100%;" >注意:{{list}}执行计划要提高信用卡的扫码支付额度（单笔一千，单日大于该计划的预留金额，单月大于该计划的还款金额）可拨打银行客服电话95595或在光大银行app设置</marquee>
        </div> -->
        <div class="w9mau">
            <p style="font-size:12px;color:#F9DDD4;line-height: 20px;">方案进度：{{cccard.plan.alreadyAmount
                | fmtAmount}}/{{cccard.plan.totalAmount | fmtAmount}}</p>
            <van-progress :percentage="cccard.plan.alreadyAmount/cccard.plan.totalAmount*100 |fmtjdt" :show-pivot='false'
                color="#A2C7EA" />
        </div>

        <button class="zdjh" style="margin:15px 20px;margin-top:20px;" @click="ckxq(cccard)">查看详情</button>
        <button class="zdjh" style="margin:20px 0;" @click="sure(cccard)">中断计划</button>
        <div style="clear:both"></div>
        <Modal v-model="stopplan" :closable="false" @on-cancel="stop()" @on-ok="modal1=false" cancel-text='确定' ok-text='取消'>

            <p style="text-align: left;"> 提示:</p>
            <p style="text-align: center;margin-top:20px;">谨慎操作：如有消费成功的订单，请在还款结束后再中断计划，否则无法执行代付。</p>
        </Modal>
    </div>

</template>
<script>
    export default {
        props: ['cccard'],
        data() {
            return {
                
                stopplan: false,
                isshowtext:false,
                list:'光大银行',
            }
        },
        created() {
        },
        methods: {
          
            stop() {
                console.log(this.cccard)
                this.$Spin.show();
                var self = this;

                axios
                    .get(this.$store.state.host + "/plans/stopPlan", {
                        params: {
                            merchantId: this.$store.state.merchantId,
                            token: this.$store.state.token,
                            planId: this.cccard.plan.pId
                        }
                    })
                    .then(res => {
                        // console.log(this.planId)
                        if (res.data.respCode == "0000") {
                            this.getcardlist();
                            this.$Spin.hide();
                            this.$Message.success("中断成功");
                        } else {
                            self.$Spin.hide();
                            this.$Message.error("失败");
                        }
                    });
            },
            sure(cccard) {
                this.stopplan = true;
                this.pId = cccard.plan.pId;
            }
        }


    }
</script>
<style scoped>
.showtext{
    width:100%;
    width:100%;
    background:white;
    color:rgb(78, 78, 78);
    height:20px;
    line-height:20px;
  }
</style>
